<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="box">
			<hello-world
				:age="age"
				v-on:myevent="handle($event)"
				v-on:myevent2="add($event)"
			></hello-world>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			// 既然不能通过修改 props 传值给父组件，那么应该怎么处在内地？
			// 子组件需要通过 自定义事件 的方式向父组件传值
			// 自定义事件，就是定义一个类似于 click、keyup 这样的事件

			// 声明子组件
			Vue.component('hello-world', {
				// props 存在一个特性
				// props 是一个单项数据流
				// props 只能用来接收数据，但是不能够对 props 传递的值进行修改

				props: ['age'],
				data: function () {
					return {
						name: 'Tom'
					}
				},
				template: `
			    <div>
				    <p>{{ name }}</p>
				    <p>{{ age }}</p>
			         <!-- $emit 作用：定义一个事件，并触发，触发以后，就类似于 click、keyup 这样的事件 -->
			         <button @click="$emit('myevent',10)">子向父传值</button>
			         <button @click="$emit('myevent2',{name:'lili',info:'我是丽丽'})">增加年龄(子向父传值)</button>
				  </div>
			     `
			})

			var vm = new Vue({
				el: '.box',
				data: {
					age: 3,
					num: null
				},
				methods: {
					handle(params) {
						console.log('子组件自定义事件成功')
						console.log(params)
						this.age = params
						this.num = params
					},
					add(params) {
						this.age++
						console.log(params)
					}
				}
			})
		</script>
	</body>
</html>
